<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Loading Text Animation Effects Html & CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body> 

    <section class="loader-wrapper">
        <div class="loader">
            <div class="dot" style="--i:0;"></div>
            <div class="dot" style="--i:1;"></div>
            <div class="dot" style="--i:2;"></div>
            <div class="dot" style="--i:3;"></div>
            <div class="dot" style="--i:4;"></div>
            <div class="dot" style="--i:5;"></div>
            <div class="dot" style="--i:6;"></div>
            <div class="dot" style="--i:7;"></div>
            <div class="dot" style="--i:8;"></div>
            <div class="dot" style="--i:9;"></div>
        </div> 
        <h2>LOADING...</h2>
        <div class="loader">
            <div class="dot" style="--i:0;"></div>
            <div class="dot" style="--i:1;"></div>
            <div class="dot" style="--i:2;"></div>
            <div class="dot" style="--i:3;"></div>
            <div class="dot" style="--i:4;"></div>
            <div class="dot" style="--i:5;"></div>
            <div class="dot" style="--i:6;"></div>
            <div class="dot" style="--i:7;"></div>
            <div class="dot" style="--i:8;"></div>
            <div class="dot" style="--i:9;"></div>
        </div> 
    </section>  
    <section class="content">
        Text Loading Animation
    </section>  
<script type="text/javascript" src="main.js"></script>
</body>
</html>